<template>
  <div>
    <div class="clearfix">
      <el-button
        size="mini"
        class="float-right"
        type="primary"
        @click="addBtnClick">
        <i class="el-icon-plus"/>
      </el-button>
    </div>
    <br>
    <!--列表数据-->
    <w-cell
      v-for="(v, k) in dataArr"
      :link="v.link"
      :title="v.title"
      :describe="v.dateStr"
      :detail="v.content"
      :hover="false"
      :operation-width="120"
      :key="k">
      <el-button
        type="primary"
        size="mini"
        class="el-icon-edit"
        @click.stop="editBtnClick(v)"/>
      <el-button
        type="danger"
        size="mini"
        class="el-icon-delete"
        @click.stop="detailBtnClick(v)"/>
    </w-cell>

    <!--添加-->
    <el-dialog
      :title="moduleTitle"
      :visible.sync="dialogFormVisible"
      width="600px">
      <el-form
        :model="form"
        :rules="rules"
        label-width="50px"
        ref="form"
        label-position="right">
        <el-form-item
          label="时间"
          prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"/>
        </el-form-item>
        <el-form-item
          label="标题"
          prop="title">
          <el-input
            v-model.lazy="form.title"
            placeholder="请输入"/>
        </el-form-item>
        <el-form-item
          label="内容"
          prop="content">
          <el-input
            type="textarea"
            v-model="form.content"
            placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          size="mini"
          @click="cancelBtnClick">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          size="mini"
          @click="okBtnClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import StudyTimeLineModel from '@/models/web/StudyTimeLineModel'
  import WCell from '@/components/pc/Cell/cell_02'
  export default {
    name: 'AdminWebStudyTimeLine',
    components: {
      WCell
    },
    data() {
      return {
        // 是否显示弹窗
        dialogFormVisible: false,
        // 弹窗from
        form: new StudyTimeLineModel(),
        // 数据数组
        dataArr: [],
        // 是否是编辑模式
        isEdit: false,
        // 是否加载中
        loading: false,
        /**
         * from校验
         */
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ],
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
        }
      }
    },
    computed: {
      // 模态框标题
      moduleTitle() {
        return this.isEdit ? '编辑TimmeLine' : '添加TimeLine'
      }
    },
    mounted() {
      this.getAllModels()
    },
    methods: {
      /**
       * 表单校验
       */
      checkFrom() {
        return new Promise((resolve, reject) => {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              resolve()
            } else {
              reject()
              return false;
            }
          });
        })
      },
      /**
       * 添加按钮点击
       */
      addBtnClick() {
        this.isEdit = false
        this.form = new StudyTimeLineModel()
        // 添加弹窗
        this.dialogFormVisible = true
      },
      /**
       * 确定按钮点击
       * @returns {Promise<void>}
       */
      okBtnClick() {
        this.checkFrom().then(() => {
          this.loading = true
          this.form.addOrUpdate(this.isEdit).then(() => {
            this.dialogFormVisible = false
            this.getAllModels()
          }).catch(() => {
          }).finally(() => {
            this.loading = false
          })
        }).catch(() => {})
      },
      /**
       * 取消按钮点击
       */
      cancelBtnClick() {
        this.dialogFormVisible = false
      },
      /**
       * 获取所有数据
       */
      getAllModels() {
        StudyTimeLineModel.loadAllModels().then((dataArr) => {
          this.dataArr = dataArr
        })
      },
      /**
       * 编辑按钮点击
       * @param index
       * @param row
       */
      editBtnClick(item) {
        this.isEdit = true
        this.form = new StudyTimeLineModel()
        Object.assign(this.form, item)
        this.dialogFormVisible = true
      },
      /**
       * 删除按钮点击
       * @param row
       */
      detailBtnClick(item) {
        item.dustbin_push('title').w_then(() => {
          this.getAllModels()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
